<!-- HTML5文档头 -->
<!DOCTYPE html>
<!-- lang="zh-cn"，此网页基本是中文内容 -->
<html lang="zh-cn">

	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="css/core.css" />
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>

	<body>
		<header class="header">
				<div class="top" id="top">
					<div class="content">		
						<div class="left">
							<div class="all-menu">
								<a href="#"></a>
								<div class="sub-menu">
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											
										</ul>
									</div>
								</div>
							</div>
							<div class="logo">
								<a href="#">
									<span class="icon"></span>
									<span class="globals"></span>
								</a>
							</div>
						</div>
						<div class="nav">
							<ul>
								<li><a href="index.html"  class="current">Home</a></li>
								<li class="pages">
									<a href="pages.html">pages</a>
									<ul class="sub-nav">
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="vancancies-details.html">Vacancies</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li  class="pages">
									<a href="portfolio.html">Portfolio</a>
									<ul class="sub-nav">
										<li><a href="masonry-four.html">Masonry Four</a></li>
										<li><a href="masonry-three.html">Masonry Three</a></li>
										<li><a href="grid_three.html">Grid Three</a></li>
										<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
										<li><a href="landscape.html">landscape</a></li>
										<li><a href="gallery.html">gallery</a></li>
									</ul>
								</li>
								<li><a href="vacancies.html">Vacancies</a>
								</li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="cantact.html">Contacts</a></li>
							</ul>
						</div>
						<div class="right">
							<span></span>
							<ul class="sub-nav">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Vacancies</a></li>
								<li><a href="#">FAQ</a></li>
								<li><a href="#">Pricing Table</a></li>
								<li><a href="#">Our Team</a></li>	
							</ul>
						</div>
					</div>
					
				</div>
		<!-------移动端导航------->
				<div class="menu-list" id="menu-list">
					<div class="item">
						<ul class="item-menu">
							<li class="home" id="home"></li>
							<li class="more"></li>
							<li class="logo"></li>
						</ul>
						<ul id="sub-menu">
							<li><a href="index.html">Home</a></li>
							<li><a href="pages.html">pages</a></li>
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="vacancies.html">Vacancies</a></li>	
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				
				<div class="bottom" id="bottom">
					<div class="inner">
						<div class="left">
							<a href="#">Home</a>
							<span>/</span>
							<a href="#">pages</a>
							<span>/</span>
							<a href="#" class="current">Dropdown Menu Style</a>
						</div>
						<div class="right">
							<div class="message">
								<a href="#">+</a>
								<div class="send">
									<span><i></i>Send a Message</span>
								</div>
							</div>
						</div>
					</div>
				</div>
		</header>

		<section class="masonry-three">
            <div class="masonry-three-container clearfix">
                <header>
                	<h1 class="masonry-three-title">Portfolio Full Screen Masonry 4 Columns</h1>
                	<p class="masonry-three-word">Lorem ipsum dolor sit amet,consectetuer adipiscing elit,sed diam nonummy<br /> nibh euismod tincidunt ut laoreet dolore magna aliquam.</p>
                </header>
                <nav>
                	<ul class="menu clearfix">
                		<li><a href="" class="SelectIt">All Categories</a></li>
                		<li><a href="">Graphic Design</a></li>
                		<li><a href="">Mock-Ups</a></li>
                		<li><a href="">Icons</a></li>
                		<li><a href="">PSD Templates</a></li>
                		<li><a href="">WordPress</a></li>
                		<li><a href="">Miscellaneous</a></li>
                	</ul>
                </nav>
                <article id="threecontainer" style="margin: 0 auto;">
                	<div class="masonry-three-pics clearfix">
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #FECC17;">
                				<img src="img/hf-portfolio0.png" style="width: 100%;height: auto;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #F56A3F;">
                				<img src="img/hf-portfolio1.png" style="width: 100%;height: auto;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #CCAC9F;">
                				<img src="img/hf-portfolio2.png" style="width: 100%;height: auto;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #1CBBB4;">
                				<img src="img/hf-portfolio3.png" style="width: 100%;height: auto;margin-left: 22px;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #99D9D7;">
                				<img src="img/hf-portfolio5.png" style="width: 100%;height: auto;margin-left: 22px;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #FEB4C1;">
                				<img src="img/hf-portfolio6.png" style="width: 100%;height: auto;margin-left: 22px;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #E3D3BE;">
                				<img src="img/hf-portfolio4.png" style="width: 100%;height: auto;margin-left: 22px;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<div class="masonry-three-pics-list">
                			<div class="image" style="background-color: #DCDDE1;">
                				<img src="img/hf-portfolio7.png" style="width: 100%;height: auto;margin-left: 22px;"/>
                				<div class="image-bg">
	                				<div class="image-bg-top">
	                					<h1>QARO - WordPress Theme</h1>
	                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
	                				</div>
	                				<div class="image-bg-bottom">
	                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
	                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
	                				</div>
	                			</div>
                			</div>
                		</div>
                		<!--加载的内容-->
                		<div class="show0" style="display: none;">
	                		<div class="masonry-three-pics-list ">
	                			<div class="image1" style="width: 332px">
	                				<img src="img/hf-pubu0.jpg" style="width: 100%;height: auto;"/>
	                				<div class="image-bg">
		                				<div class="image-bg-top">
		                					<h1>QARO - WordPress Theme</h1>
		                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
		                				</div>
		                				<div class="image-bg-bottom">
		                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
		                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
		                				</div>
		                			</div>
	                			</div>
	                		</div>
	                		<div class="masonry-three-pics-list">
	                			<div class="image1" style="width: 332px">
	                				<img src="img/hf-pubu1.jpg" style="width: 100%;height: auto;"/>
	                				<div class="image-bg">
		                				<div class="image-bg-top">
		                					<h1>QARO - WordPress Theme</h1>
		                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
		                				</div>
		                				<div class="image-bg-bottom">
		                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
		                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
		                				</div>
		                			</div>
	                			</div>
	                		</div>
	                		<div class="masonry-three-pics-list">
	                			<div class="image1" style="width: 332px">
	                				<img src="img/hf-pubu2.jpg" style="width: 100%;height: auto;"/>
	                				<div class="image-bg">
		                				<div class="image-bg-top">
		                					<h1>QARO - WordPress Theme</h1>
		                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
		                				</div>
		                				<div class="image-bg-bottom">
		                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
		                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
		                				</div>
		                			</div>
	                			</div>
	                		</div>
	                		<div class="masonry-three-pics-list">
	                			<div class="image1" style="width: 332px">
	                				<img src="img/hf-pubu3.jpg" style="width: 100%;height: auto;"/>
	                				<div class="image-bg">
		                				<div class="image-bg-top">
		                					<h1>QARO - WordPress Theme</h1>
		                					<p>Lorem ipsum dolor sirt ament consectetur.</p>
		                				</div>
		                				<div class="image-bg-bottom">
		                					<a href="">Portfolio</a>/<a href="">website</a>/<a href="">PSD Templates</a>
		                					<div class="image-bg-btn"><i class="image-bg-btn-point"></i></div>
		                				</div>
		                			</div>
	                			</div>
	                		</div>
                		</div>
                	</div>
                </article>
            </div>
            <footer>
                <div class="blog-btn">Load More</div>
            </footer>
        </section>

		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>
					
					<ul class="center-menu">
						<li><img src="img/footer1.png"/></li>
						<li><img src="img/footer9.png"/></li>
						<li><img src="img/footer5.png"/></li>
						<li><img src="img/footer2.png"/></li>
						<li><img src="img/footer8.png"/></li>
						<li><img src="img/footer4.png"/></li>
						<li><img src="img/footer3.png"/></li>
						<li><img src="img/footer6.png"/></li>
					</ul>
				</div>
			</div>
			
			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png"/>
							<div class="inner-top-write">
								Mirum est <a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>
						
						<div class="left-inner-bottom">
							<img src="img/footer7.png"/>
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>
					
					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px"/></li>
						</ul>
					</div>
					
					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img"/>
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>
		<script type="text/javascript" src="vendor/jquery-2.1.0.js" ></script>
		<script>
			$(function() {
				// 保证图片都能正常加载完成，方便后面进行准确的高度计算
				$(window).load(function() {
					threeImage();
				});
				
				// 点击加载一批新数据
				$('.blog-btn').click(function(){
					var url = [];
					var imgUrl = ["img/hf-pubu4.jpg","img/hf-pubu5.jpg","img/hf-pubu6.jpg","img/hf-pubu7.jpg","img/hf-pubu8.jpg","img/hf-pubu9.jpg","img/hf-pubu10.jpg","img/hf-pubu11.jpg","img/hf-pubu12.jpg","img/hf-pubu13.jpeg"]
					$('.masonry-three-pics').append($('.masonry-three-pics .show0 .masonry-three-pics-list:lt(5)').show().clone());
					$('.show0 img').each(function(i, v){
						url.push($(this).attr("src"));
						//$(this).attr("src","img/hf-pubu" + i + ".jpg");
						$(this).attr("src",imgUrl[i]);
					})
					threeImage();
				})
			});
			
			
			function threeImage() {
				var box = $('.masonry-three-pics-list');
				var picsWidth = $('#threecontainer');
					// 每张图片的宽度
					var boxWidth = box.eq(0).width();
					// 计算每一排能放几张图片
					var num = Math.floor(picsWidth.width() / boxWidth);
					// 建立一数组存放每张图片的高度
					var boxHeigths = [];
					box.each(function(i, e){
						// 计算每张图片的高度
						var currentBoxHeight = $(this).height();
						// 如果是前5张应该要存入boxHeights数组中
						if (i < num) {
							boxHeigths.push(currentBoxHeight);
						} else {
							// 从第6张开始都要判断前面的那张高度最小
							var minBoxHeight = Math.min.apply(null, boxHeigths);
							// 查看最小盒子的高度在数组里面的下标位置
							var minBoxHeightIndex = $.inArray(minBoxHeight, boxHeigths);
							if($(window).width() > 1250){
								picsWidth.width(boxWidth * 4);
								
								$('.masonry-three-pics-list:eq(0)').css({
									'left': 0 * (310),
									'top' : 0 ,
								});
								$('.masonry-three-pics-list:eq(1)').css({
									'left': 1 * (310),
									'top' : 0 ,
								});
								$('.masonry-three-pics-list:eq(2)').css({
									'left': 2 * (310),
									'top' : 0 ,
								});
								$('.masonry-three-pics-list:eq(3)').css({
									'left': 3 * (310),
									'top' : 0 ,
								});
								// 把图片放到哪个位置
								$(this).css({
									'position': 'absolute',
									'left': minBoxHeightIndex * (310),
									'top' : minBoxHeight ,
								});
								
							}else if(($(window).width() < 1250)&&($(window).width() > 968)){
								picsWidth.width(boxWidth * 3);
								$('.masonry-three-pics-list:eq(0)').css({
									'left': 0 * (310),
									'top' : 0 ,
								});
								$('.masonry-three-pics-list:eq(1)').css({
									'left': 1 * (310),
									'top' : 0 ,
								});
								$('.masonry-three-pics-list:eq(2)').css({
									'left': 2 * (310),
									'top' : 0 ,
								});
								// 把图片放到哪个位置
								$(this).css({
									'position': 'absolute',
									'left': minBoxHeightIndex * (310),
									'top' : minBoxHeight ,
								});
							}else if($(window).width() < 968&&($(window).width() > 650)){
								picsWidth.width(boxWidth * 2);
								$('.masonry-three-pics-list:eq(0)').css({
									'left': 0 * (310),
									'top' : 0 ,
								});
								$('.masonry-three-pics-list:eq(1)').css({
									'left': 1 * (310),
									'top' : 0 ,
								});
								// 把图片放到哪个位置
								$(this).css({
									'position': 'absolute',
									'left': minBoxHeightIndex * (310),
									'top' : minBoxHeight ,
								});
							}else if($(window).width() < 650&&($(window).width() > 325)){
								picsWidth.width(boxWidth * 1);
								$('.masonry-three-pics-list:eq(0)').css({
									'left': 0 * (310),
									'top' : 0 ,
								});
								// 把图片放到哪个位置
								$(this).css({
									'position': 'absolute',
									'left': minBoxHeightIndex * (310),
									'top' : minBoxHeight ,
								});
							}else if(($(window).width() < 325)){
								picsWidth.width("auto");
							}
							
							// 把最小图片的高度更新
							boxHeigths[minBoxHeightIndex] += currentBoxHeight;
							
							//一排中最高图片的高度为threecontainer的高度
							var maxBoxHeight = Math.max.apply(null, boxHeigths);
							picsWidth.height(maxBoxHeight);
							
							
						}
					});
			}
			threeImage();
			$(window).resize(function(){
				threeImage();
			})
			
		</script>

		<script src="js/core.js"></script>
	</body>

</html>
